<template>
    <div class="layout">
        <Layout-nav></Layout-nav>
        <Layout-breadcrumb></Layout-breadcrumb>
<!--    <Layout-content :menu="menu" :menuItem="menuItem"></Layout-content>     -->      
        <div class="layout-content">
            <Row>
                <Col span="4">
                    <Product-menu></Product-menu>
                </Col>
                <Col span="20">
                    <router-view></router-view>
                </Col>
            </Row>
        </div>        

    </div>
</template>
<script>
    import LayoutNav from "./common/Layoutnav";
    import LayoutBreadcrumb from "./common/LayoutBreadcrumb";
    import LayoutContent from "./common/LayoutContent";
    import ProductMenu from "./common/ProductMenu";

    export default {
        data() {
            return {};
        },
        mounted() {

        },
        beforeDestroy() {

        },
        methods: {

        },
        components:{
            LayoutNav,
            LayoutBreadcrumb,
            ProductMenu,
            LayoutContent
        }
    };
</script>

<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
    }

    .layout-breadcrumb{
        padding: 10px 20px;
    }

    .layout-content{
        min-height: 200px;
        margin: 0 20px;
/*        overflow: hidden;*/
        background: #fff;
        border-radius: 4px;
    }

    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
</style>